<template>
  <h2>pinia-demo</h2>
  <p>{{ store.count }}</p>
  <p>{{ store.doubleCount }}</p>
  <button @click="fn">btn</button>
  <button @click="fn2">reset</button>

  <hr />

  <Child />
</template>

<script setup>
import Child from "./Child.vue";
import useCounterStore from "./stores/counter";

// 引进来的方法调用就可以得到仓库实例了
const store = useCounterStore();

// const { count } = store;

const fn = () => {
  // 仓库的数据可以在组件里面直接修改
  // store.count++;

  // 仓库的数据也可以通过actions的函数来修改
  // store.add();

  // 也可以通过store.$patch函数来修改仓库数据
  // 比起直接修改，它可以一次性修改多个变量
  store.$patch({
    count: store.count + 1,
  });
};

const fn2 = () => {
  // store.$reset()用于重置仓库数据
  store.$reset();
};
</script>
